<div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title">Monedas SMS</h3>
  </div>
  <div class="panel-body">
  	<div id="custom-toolbar">
        <div class="form-inline" role="form">
        	<label class="control-label">Sin Equivalencias</label>
            <input type="checkbox" id="sinEquiv" name="sinEquiv" checked="checked">
        </div>
    </div>
    <table id="table" data-search="true" data-toolbar="#custom-toolbar"
		data-side-pagination="server" data-pagination="true"
		data-page-list="[10, 20, 30]"
		data-url="<?php echo base_url();?>index.php/monedaEquiv/lista">
      <thead>
        <tr>
          <th data-field="ID_MONEDA_EQUIV" data-align="center" data-sortable="false">ID</th>
          <th data-field="EQUIVALENCIA" data-align="center" data-sortable="false">NOMBRE</th>
          <th data-field="MONEDA" data-align="center" data-sortable="false">MONEDA</th>
          <th data-field="ID_MONEDA_EQUIV" data-width="90" data-align="center" data-sortable="false" 
              data-formatter="formatButton"></th>
        </tr>
      </thead>
    </table>
  </div>
</div>

<div id="dialogEquiv" class="modal fade">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal"
					aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
				<h4 id="lblTitulo" class="modal-title">Seleccionar Moneda</h4>
			</div>
			<form id="formAsignar" class="form-horizontal" method="post" 
					action="<?php echo base_url();?>index.php/monedaEquiv/asignar">
				<div class="modal-body">
					<div class="form-group">
						<input type="hidden" id="equivalencia" name="equivalencia">
						<label class="col-sm-2 control-label">Moneda</label>
						<div class="col-sm-10">
							<select id="moneda" name="moneda" style="width: 100%" class="selectpicker with-ajax"
								data-live-search="true">
							</select>
						</div>
					</div>
				</div>
				<div class="modal-footer">
					<button type="submit" class="btn btn-default">Aceptar</button>
				</div>
			</form>
		</div>
		<!-- /.modal-content -->
	</div>
	<!-- /.modal-dialog -->
</div>

<script type="text/javascript">
	$(function() {
		$('#table').bootstrapTable({
	  		cache: false,
	  		queryParams: function (p) {
		  		p.sinEquiv = $("#sinEquiv").is(":checked");
		  		return p;
	  		}
		});

		$("#sinEquiv").click (function() {
			$('#table').bootstrapTable('refresh', {silent: true});
		});

		$('#moneda').selectpicker().filter('.with-ajax').ajaxSelectPicker({
	        ajax: {
	            url: '<?php echo base_url();?>index.php/monedaEquiv/monedas',
	            type: 'POST',
	            dataType: 'json',
	            data: {palabra: '{{{q}}}',items: 5}
	        },
	        cache: false,
	        preserveSelected: false,
	        preprocessData: function (data) {
	            var i, l = data.length, array = [];
	            if (l) {
	                for(i = 0; i < l; i++){
	                    array.push($.extend(true, data[i], {
	                        text: data[i].NOMBRE,
	                        value: data[i].ID_MONEDA,
	                    }));
	                }
	            }
	            return array;
	        }
	    });

		$('#formAsignar').ajaxForm({
			success: function (response, statusText) {
		        $('#dialogEquiv').modal('hide');
		        $('#table').bootstrapTable('refresh', {silent: true});
		        BootstrapDialog.alert('Asignacion guardada');
		    }
	    });
	});

	function formatButton (value, row) {
		return '<button class="btn btn-default btn-xs" type="button" onclick="asignar(' + value + ')">Asignar</button>';
	}

	function asignar (value) {
		$('#equivalencia').val(value);
		$('#dialogEquiv').modal('show');
	}
</script>